<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>amCharts examples</title> 
        <link rel="stylesheet" href="style.css" type="text/css">
        <script src="../../amcharts/javascript/amcharts.js" type="text/javascript"></script>
        <script src="../../amcharts/javascript/raphael.js" type="text/javascript"></script>        
	    
      <script type="text/javascript">

        var chart;
		var chartData = [
				{year:2005,income:23.5,expenses:18.1},
				{year:2006,income:26.2,expenses:22.8},
				{year:2007,income:30.1,expenses:23.9},
				{year:2008,income:29.5,expenses:25.1},
				{year:2009,income:24.6,expenses:25.0}
			];


        window.onload = function() {

           	chart = new AmCharts.AmSerialChart();
           	chart.pathToImages = "../../amcharts/javascript/images/";
            chart.dataProvider = chartData;
			chart.marginTop = 15;
			chart.marginRight = 20;
			chart.categoryField = "year";
			chart.angle = 30;
			chart.depth3D = 30;

   			var legend = new AmCharts.AmLegend();
			chart.addLegend(legend);

			var graph1 = new AmCharts.AmGraph();
			graph1.title = "Income";
			graph1.valueField = "income";
			graph1.type = "column";
			graph1.lineAlpha = 0;
			graph1.fillAlphas = 1;
			chart.addGraph(graph1);

			var graph2 = new AmCharts.AmGraph();
			graph2.title = "Expenses";
			graph2.valueField = "expenses";
			graph2.type = "line";
			graph2.lineThickness = 2;
			graph2.bullet = "round";
			chart.addGraph(graph2);
			
   			chart.categoryAxis.gridPosition = "start";

			chart.write("chartdiv");
		}

	    </script>

    </head>

	<body>
		<div id="chartdiv" style="width:600px; height:400px;"></div>
	</body>
</html>